<template>
  <div class="app-container-sm">
      <el-card class="card-margin-bottom">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" class="form-minus-bottom">
          <el-form-item label="产品" size="normal" prop="sellproId" >
              <el-select v-model="queryParams.sellproId" placeholder="请选择产品" clearable size="medium"  >
                  <el-option v-for="item in sellproList"
                      :key="item.sellproId"
                      :label="item.sellproName"
                      :value="item.sellproId.toString()">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="溯源码范围" size="normal" prop="versionId" label-width="100px">
              <el-select class="width-420" v-model="queryParams.versionId" placeholder="溯源码范围" clearable size="medium"  >
                  <el-option v-for="item in versionList"
                      :key="item.versionId"
                      :label="item.codeRange"
                      :value="item.versionId.toString()">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="溯源码" size="normal" prop="traceCode">
              <el-input v-model="queryParams.traceCode" placeholder="请输入溯源码" size="medium" clearable></el-input>
          </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

      </el-form-item>
    </el-form>
      </el-card>
<el-card class="card-padding-bottom">
    <el-table v-loading="loading" :data="codeList" >
      <el-table-column label="溯源产品" align="center" prop="sellproId" width="200">
          <template #default="{row}">
              <data-tag :options="sellproList" :value="row.sellproId" value-name="sellproId" label-name="sellproName"></data-tag>
          </template>
      </el-table-column>
      <el-table-column label="溯源码" align="center" prop="traceCode" width="250px" />
      <el-table-column label="溯源码范围" align="center" prop="versionId" >
          <template #default="{row}">
              <data-tag :options="versionList" :value="row.versionId" value-name="versionId" label-name="codeRange"></data-tag>
          </template>
      </el-table-column>
      <el-table-column label="溯源二维码" align="center" prop="traceUrl" width="150px" >
          <template v-slot:default="{ row }">
          <div class="qrcode-wrap" @click="previewImage(row.traceUrl,row)">
            <qrcode-vue :size="30" :value="row.traceUrl"></qrcode-vue>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="traceUrl" width="100">
          <template #default="{row}">
              <dict-tag :options="dict.type.trace_status" :value="row.status"></dict-tag>
          </template>
      </el-table-column>
       <el-table-column label="被溯源次数" align="center" prop="traceTime" width="240">
           <template #default="{row}">
               <span class="font-color-warning font-weight-bold font-size-20">{{row.traceTime}}</span><br><span class="font-color-danger font-size-12 font-style-italic">{{row.traceTime>1?'被多次溯源，请核实':''}}</span>
           </template>
       </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleViewRecord(scope.row)"
            v-hasPermi="['agriculture:record:list']"
          >查看溯源记录</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
</el-card>
    <!-- 添加或修改溯源码对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <!-- <el-form-item label="溯源版本" prop="versionId">
          <el-input v-model="form.versionId" disabled/>
        </el-form-item> -->
        <el-form-item label="数量" prop="codeNum">
          <el-input v-model="form.codeNum" type="number" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 二维码弹窗 -->
    <el-dialog :title="qrcode.title" :visible.sync="qrcode.open" width="240px">
      <qrcode-vue :value="qrcode.value" :size="200"></qrcode-vue>
    </el-dialog>
  </div>
</template>

<script>
import { listCode,generateCode } from "@/api/trace/code";
import { listSellpro, getSellpro } from "@/api/trace/sellpro";
import { listVersion, getVersion } from "@/api/trace/version";
import QrcodeVue from 'qrcode.vue'

export default {
  name: "",
  components: {
    QrcodeVue
  },
  dicts:['trace_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 溯源码表格数据
      codeList: [],
      sellproList:[],
      versionList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        traceCode: null,
        versionId:null,
        sellproId:null
      },
      // 表单参数
      form: {
          versionId:null,
          sellproId:null,
          codeNum:null
      },
      // 表单校验
      rules: {
        versionId: [
          { required: true, message: "溯源版本ID不能为空", trigger: "blur" }
        ],
        codeNum: [
          { required: true, message: "数量", trigger: "blur" }
        ]
      },
      //二维码弹窗
      qrcode:{
        title:null,
        open:false,
        value:null
      }
    };
  },
 async  created() {
    await this.getSellproList();
    await this.getVersionList();
    const {versionId,sellproId} = this.$route.query;

    //赋值查询条件
    this.queryParams.versionId = versionId?versionId:null;
    this.queryParams.sellproId = sellproId?sellproId:null;
    //赋值form表单
    this.form.versionId = versionId?versionId:null;
    this.form.sellproId = sellproId?sellproId:null;
    //查询产品名称
    if(versionId){
        const res1 =  await getVersion(versionId);
        this.$versionCode =res1.data.versionCode;
    }
    //查版本编码
    if(sellproId){
        const res2 = sellproId && await getSellpro(sellproId);
        this.$sellproName = res2.data.sellproName;
    }

    this.getList();
  },
  methods: {
    /** 查询溯源码列表 */
    getList() {
      this.loading = true;
      listCode(this.queryParams).then(response => {
        this.codeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    async getSellproList(){
        const { rows}= await listSellpro();
        this.sellproList = rows;
    },
    async getVersionList(){
        const { rows}= await listVersion();
        this.versionList = rows;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        sellproId:this.$route.query.sellproId,
        versionId: this.$route.query.versionId,
        codeNum:null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 生成溯源码按钮操作 */
    generateCode() {
      this.reset();
      this.open = true;
      this.title = `${this.$sellproName}(版本:${this.$versionCode})生成溯源码`;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
            this.form.codeNum = Number(this.form.codeNum);
            this.form.versionId = Number(this.form.versionId);
            generateCode(this.form).then(response => {
              this.$modal.msgSuccess("生成成功");
              this.open = false;
              this.getList();
            });

        }
      });
    },
    /** 查询按钮操作 */
    handleViewRecord(row){
        this.$router.push({
            path:'/trace/record',
            query:{
                t: Date.now(),
                traceCode:row.traceCode
            }
        })
    },
     /** 二维码弹窗 */
    previewImage(value,row){
      this.qrcode.title = '溯源码';
      this.qrcode.open = true;
      this.qrcode.value = value;
    }
  }
};
</script>
